<!-- 定义表单 表单中有表单项 表单需要绑定对象， 表单项需要绑定对象的成员变量 提交表单需要使用ajax方法提交json对象 -->
<template>
  <div>
    <el-dialog title="新增司机" :visible.sync="addDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">

      <el-form   label-width="120px"  ref="addStudentUploadForm">
        <!-- 代码中的1表示第几个 和引入js的type变量对应 -->
        <!-- action 就是原来普通form action也就是提交地址 所以对应方法返回后端正确的action请求地址-->
        <el-form-item label="头像">
          <el-upload
            class="upload"
            :action="getUploadUrl"
            list-type="picture-card"
            :limit="1"
            accept="image/*"
            :on-change="(file,fileList)=>{imgHandleChange(file,fileList,1,this,'addStudentUploadForm','head')}"
            :on-remove="(file,fileList)=>{imgHandleRemove(1,this)}"
            :on-before="(file,fileList)=>{imghandleBeforeUpload(file,1,this)}"
            :auto-upload="false"
            :file-list="fileList[0]"
            ref="file1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!--<viewer-dialog ref="viewer" :images="imagesUp"></viewer-dialog>-->
        </el-form-item>
      </el-form>

      <el-form :model="drivers" :rules="addDriverRules" ref="addDriverForm">

        <el-form-item  label="司机ID：" label-width="100px">
          <el-col :span="16">
            <el-input v-model="drivers.did" placeholder="请填入司机ID" @input="updateView($event)"/>
          </el-col>
        </el-form-item>

        <el-form-item  label="司机姓名：" label-width="100px">
          <el-col :span="16">
            <el-input v-model="drivers.dname" placeholder="请填入司机姓名"/>
          </el-col>
        </el-form-item>

        <el-form-item  label="电话：" label-width="100px">
          <el-col :span="16">
            <el-input v-model="drivers.dphone" placeholder="请填入电话"/>
          </el-col>
        </el-form-item>

        <el-form-item  label="保险时间：" label-width="100px">
          <el-col :span="8">
            <el-date-picker
              v-model="drivers.daccident"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>


        <el-form-item  label="身份证：" label-width="100px">
          <el-col :span="16">
            <el-input v-model="drivers.didentitycard" placeholder="请填入身份证"/>
          </el-col>
        </el-form-item>

        <el-form-item  label="身份证照片：" label-width="100px">
          <el-col :span="16">
            <el-input v-model="drivers.dpicture" placeholder="请填入身份证照片"/>
          </el-col>
        </el-form-item>




        <!--<el-form   label-width="100px"  ref="addIdentityUploadForm" class="imgUploadForm" style="position: absolute;top: 600px;">-->
          <!-- 代码中的1表示第几个 和引入js的type变量对应 -->
          <!-- action 就是原来普通form action也就是提交地址 所以对应方法返回后端正确的action请求地址-->
          <el-form-item label="请填入身份证照片:"  style="margin-left: 0px;">
            <el-upload
              class="upload"
              :action="getUploadUrl2"
              list-type="picture-card"
              :limit="limitNum"
              accept="image/*"
              :on-change="(file2,fileList2)=>{imgHandleChange2(file2,fileList2,1,this,'addIdentityUploadForm','idcar')}"
              :on-remove="(file2,fileList2)=>{imgHandleRemove2(1,this,file2)}"
              :on-before="(file2,fileList2)=>{imghandleBeforeUpload2(file2,1,this)}"
              :auto-upload="false"
              :file-list="fileList2"
              ref="file1">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!--<viewer-dialog ref="viewer" :images="imagesUp"></viewer-dialog>-->
          </el-form-item>
        <!--</el-form>-->

        <el-row>
          <el-col :span="16">
            <span class="addSpan">&nbsp;</span>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="addDrivers">添加司机</el-button>
          </el-col>
        </el-row>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import api from "../../../../axios/api.js"
  import utilsFD from "../../../../static/js/utils/index.js"
  import utils from "../../../../static/js/utils/upload.js"
  import rules from "../../../../static/js/validator/rules.js"
  import { regionData, CodeToText } from "element-china-area-data";
  export default {
    props:["addDialogIsShow"],
    name: "add",
    data(){
      return {
        drivers:{},
        //校验
        addDriverRules: {
          did: [
            {required: true, message: "学号不能为空", trigger: 'blur'},
            {validator: this.validateLength, trigger: 'blur'}
          ],
          dname: [{required: true, message: "姓名不能为空", trigger: 'blur'}, {
            pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
            message: '姓名必须为中文',
            trigger: 'blur'
          }],
          dphone: [{required: true, message: "电话不能为空", trigger: 'blur'}, {
            validator:rules.FormValidate.Form().validatePhone,trigger:'change'
          }]
        },
        //校验结束
        //上传使用
        fileList: [], //缓存区文件
        uploadFile:[], //  上传用文件
        formData:{files:[]},
        imagesUp:null,
        //上传使用结束

        //多图片上传使用
        fileList2: [], //缓存区文件
        uploadFile2:[], //  上传用文件
        formData2:{files:[]},
        imagesUp2:null,
        //多图片上传使用结束
        limitNum:2
      }
    },
    methods:{
      addDrivers:function () {
        this.$refs['addDriverForm'].validate(valid => {//此处refs对象和标签上的ref对应
          if (valid) {

            api.setDataFromAxios("/api/yunshuController/addDrivers", this.drivers, "post", null).then(
              dto => {
                this.$message.success("司机添加成功");
                this.handleClose();
                this.$parent.getDriverByPage();
              }
            )
          } else {
            this.$message.warning("请正确格式填写后提交");
            return
          }
        })
      },
      //提供给change事件刷新输入
      updateView(e) {
        this.$forceUpdate();
      },
      handleClose:function(){
        //给父组件传参
        this.$emit("closeAddDialog");
      },
      //多文件上传
      imghandleBeforeUpload(file,type,vm) {
        return utils.UPLOAD.Upload().handleBeforeUpload(file,type,vm);
      },
      imgHandleChange(file, fileList, type,vm,modelName,name) {
        if(vm.fileList[type].length!=0){
          alert("请先删除再提交")
        }
        return utils.UPLOAD.Upload().handleChange(file, fileList, type,vm,modelName,name);
      },
      imgHandleRemove(type,vm) {

        return utils.UPLOAD.Upload().handleRemove( type,vm);
      },
      uploadImg:function(modelName,name){
        //  使用formdata格式
        let formData = new FormData();//准备一个空的表单对象
        formData.append("model",modelName);//图片上传子目录名放入表单对象
        if (this.formData.files[name]) {
          formData.append("file", this.formData.files[name]);//文件放入表单对象
        }

        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/uploadController/upload",formData,"post",{headers: { "Content-Type": "multipart/form-data" }})
          .then(dto=>{
            if(dto.code==200){
              this.$message.success (dto.msg);
              this.drivers.dpicture = dto.tList[0];
            }else{
              this.$message.error (dto.msg);
            }
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      uploadImg2:function(modelName,name,file){
        //  使用formdata格式
        let formData = new FormData();//准备一个空的表单对象
        formData.append("model",modelName);//图片上传子目录名放入表单对象
        if (this.formData2.files[name]) {
          formData.append("file2", this.formData2.files[name]);//文件放入表单对象
        }

        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/uploadController/upload",formData,"post",{headers: { "Content-Type": "multipart/form-data" }})
          .then(dto=>{
            console.log("多图片上传"+dto.tList);
            if(dto.code==200){
              this.$message.success (dto.msg);
              if (this.drivers.didentitycard==''){
                this.drivers.didentitycard = dto.tList[0];//第一次增加特殊处理
              }else {
                this.drivers.didentitycard = this.drivers.didentitycard + "," + dto.tList[0];
              }
              this.fileList2.push(file);
              if (this.fileList2.length==this.limitNum){
                $(".el-upload--picture-card").css("display","none");
              }
            }else{
              this.$message.error (dto.msg);
            }
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      imgHandleChange2(file2, fileList2, type,vm,modelName,name) {

        return utils.UPLOAD.Upload().handleChange2(file2, fileList2, type,vm,modelName,name);
      },
      imgHandleRemove2(type,vm,file2) {

        let index =  utils.UPLOAD.Upload().handleRemove( type,vm,file2);
        $(".el-upload--picture-card").css("display","inline-block");

        this.drivers.didentitycard = utils.UPLOAD.Upload().delStringByIndex(this.drivers.didentitycard,index);

        return index>0?true:false;
      },
      //多文件上传
      imghandleBeforeUpload2(file,type,vm) {
        return utils.UPLOAD.Upload().handleBeforeUpload(file,type,vm);
      }



    },
    computed:{
      getUploadUrl(){
        return      "/api/uploadController/upload";
      },
      getUploadUrl2(){
        return      "/api/uploadController/upload";
      }
    }

  }
</script>

<style scoped>
</style>
